<template>
  <div class="main">
    <div class="header">
      <span class="name">{{_organizationName}}</span>
      <div class="ctrl">
        <el-popover
          placement="bottom-end"
          width="100"
          trigger="click"
        >
          <div class="ctrl-group">
            <div
              class="ctrl-item"
              @click="handleModifyOrganizationClick"
            >
              编辑分组
            </div>
            <div
              class="ctrl-item"
              @click="handleDeleteOrganizationClick"
            >
              删除分组
            </div>
          </div>
          <i
            class="el-icon-more edit"
            slot="reference"
          ></i>
        </el-popover>
      </div>
    </div>
    <div class="organization-member">
      <div
        class="member"
        @click="handleSearchFriendClick"
      >
        <i class="member-avatar el-icon-plus"></i>
        <div class="member-name">添加</div>
      </div>
      <div
        class="member"
        v-for="(member,index) in members"
        :key="index"
        :title="member.friendUserName"
      >
        <img
          class="member-avatar"
          :src="defaultAvatar(member.friendAvatar)"
        />
        <div class="member-name">{{member.friendUserName}}</div>
      </div>
    </div>
    <form-dialog
      title="修改组名"
      :visible.sync="modifyOrganizationVisible"
    >
      <modify-organization-form
        ref="modifyOrganization"
        :organizationInfo="dataInfo"
        @cancel="handleModifyOrganizationCancel"
        @submit="handleModifyOrganizationSubmit"
      />
    </form-dialog>
    <form-dialog
      title="查找好友"
      :visible.sync="searchFriendVisible"
      width="820px"
    >
      <search-friend-form :organizationId="_organizationId" />
    </form-dialog>
  </div>
</template>

<script>
import ModifyOrganizationForm from '../form/ModifyOrganizationForm'
import SearchFriendForm from '../form/SearchFriendForm'
import { organizationDelete } from '@/api/organization'
export default {
  name: 'dataInfo',
  components: {
    ModifyOrganizationForm,
    SearchFriendForm
  },
  props: {
    dataInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      modifyOrganizationVisible: false,
      searchFriendVisible: false
    }
  },
  computed: {
    members () {
      return this.dataInfo.organizationFriendList
    },
    _organizationId () {
      return this.dataInfo.organizationId
    },
    _organizationName () {
      return this.dataInfo.organizationName
    }
  },
  methods: {
    defaultAvatar (avatar) {
      return avatar || this.$const.DEFAULT_PICTURE
    },
    // 添加好友
    handleSearchFriendClick () {
      this.searchFriendVisible = true
    },
    // 删除分组
    // 点击删除分组
    async handleDeleteOrganizationClick () {
      try {
        await this.$warning(`将删除分组【${this._organizationName}】，是否继续？`)
        this.handleOrganizationDelete()
      } catch {
        this.$message.info('已取消删除')
      }
    },
    // 删除分组
    async handleOrganizationDelete () {
      await organizationDelete(this._organizationId)
      this.$message.success('删除分组成功')
      this.$emit('refresh', 'organization', true)
    },
    // 修改组名
    // 点击修改组名
    async handleModifyOrganizationClick () {
      this.modifyOrganizationVisible = true
      await this.$nextTick()
      this.$refs.modifyOrganization.reset()
    },
    // 取消修改组名
    handleModifyOrganizationCancel () {
      this.modifyOrganizationVisible = false
    },
    // 提交修改组名
    handleModifyOrganizationSubmit () {
      this.modifyOrganizationVisible = false
      this.$emit('refresh', 'organization')
    }
  }
}
</script>

<style lang="scss" scoped>
$header-width: 50px;
$info-width: 420px;
$border-color: #ccc;
$border: 1px solid $border-color;
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content::-webkit-scrollbar {
    display: none;
  }
  .header {
    height: $header-width;
    line-height: $header-width;
    text-align: center;
    border-bottom: $border;
    position: relative;
    .name {
      font-size: 16px;
    }
    .ctrl {
      height: $header-width;
      line-height: $header-width;
      position: absolute;
      top: 0;
      right: 30px;
    }
    .edit {
      height: 50px;
      line-height: 50px;
      font-size: 25px;
      cursor: pointer;
    }
  }
  .organization-member {
    background-color: #eee;
    padding: 0 25px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .member {
      box-sizing: border-box;
      width: 70px;
      padding: 10px;
      cursor: pointer;
      &:hover {
        background-color: #c0c4cc;
      }
      .member-avatar {
        box-sizing: border-box;
        border: $border;
        display: block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 40px;
        text-align: center;
      }
      .member-name {
        width: 50px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.ctrl-group {
  .ctrl-item {
    text-align: center;
    border-bottom: $border;
    box-sizing: border-box;
    padding: 8px 0px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
    &:last-child {
      border: 0;
    }
  }
}
</style>
